<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/cookie.js"></script>
    <title>Document</title>
    <style>
        .createCode{
            /* 用户选中 */
            user-select: none;   
        }
        .right{
            font-size: 12px;
            color: green;
        }
        .err{
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_span"></span>
        </p>
        <p>
            <label>邮&emsp;箱:</label>
            <input class="email" type="text">
            <span class="email_span"></span>
        </p>
        <p>
            <label>手机号:</label>
            <input class="phone" type="text">
            <span class="phone_span"></span>
        </p>
        <p>
            <label for="">验证码:</label>
            <input type="text" class="code">
            <span class="createCode"></span>
            <span class="code_span"></span>
            
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </div>
</div>

<script>
// cookie 模拟注册登录 注册时存cookie(用户名 密码 邮箱 手机号) 登录时取cookie中的用户名和密码 和 用户输入的做对比

    var userInp = document.getElementsByClassName("user")[0];
    var userSpan = document.getElementsByClassName("user_span")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];

    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneSpan = document.getElementsByClassName("phone_span")[0];

    var emailInp = document.getElementsByClassName("email")[0];
    var emailSpan = document.getElementsByClassName("email_span")[0];

    var codeInp = document.getElementsByClassName("code")[0];
    var codeSpan = document.getElementsByClassName("code_span")[0];
    var createCodeSpan = document.getElementsByClassName("createCode")[0];
    
    var btn = document.getElementsByClassName("btn")[0];        


    var numList = [];
    for (var i = 48; i <= 57; i++) {          //数字集合
        var char = String.fromCharCode(i);
        // console.log(char);
        numList.push(char);
    }

    var bigList = [];
    for (var i = 65; i <= 90; i++) {          //大写字母集合
        var char = String.fromCharCode(i);
        // console.log(char);
        bigList.push(char);
    }

    var smallList = [];
    for (var i = 97; i <= 122; i++) {         //小写字母集合
        var char = String.fromCharCode(i);
        // console.log(char);
        smallList.push(char);
    }

// 随机验证码
    function randCode(){
        var list = numList.concat(smallList,bigList);
        var str = "";
        for(var i =0; i < 4; i++) {
            var index = Math.floor(Math.random() * list.length);
            var char = list[index];
            if (str.indexOf(char) == -1) {  // 去除重复的字符串
                str += char;
            } else {
                i--;
            }
        }
        return str;
    }
// 页面随机生成验证码
createCodeSpan.innerText = randCode(); 

    var userFlag = false;
    var pwdFlag = false;
    var emailFlag = false;
    var phoneFlag = false;
    var codeFlag = false;


// 判断用户名
    userInp.onblur = function() {
        userFlag = false;
        var user = userInp.value;
        var userReg = /^[a-zA-Z$_][\w$]{5,11}$/;
            if (userReg.test(user) ) {
                var xhr = new XMLHttpRequest();
                xhr.open("post","../php/isExistUser.php",true);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send(`user=${user}`);
                xhr.onreadystatechange = function() {
                    if(xhr.readyState  == 4 && xhr.status == 200) {
                        console.log(xhr.responseText);
                        var result = JSON.parse(xhr.responseText);
                        console.log(result);
                        if(result.status) {
                            userSpan.textContent = "√";
                            userSpan.className = "right";
                            userFlag = true;
                        } else {
                            userSpan.textContent = "该用户名已注册";
                            userSpan.className = "err";
                        }
                    }
                }
        } else {
            userSpan.textContent = "用户名由6至12位的数字,大小写字母,_,$ 组成,且不能以数字开头";
            userSpan.className = "err";
        }
    }

// 判断密码
    pwdInp.onblur = function() {
        pwdFlag = false;
        var pwd = pwdInp.value;
        var pwdReg = /^[\w$]{6,12}$/;
        if (pwdReg.test(pwd) ) {
            //  判断密码强度
            var numFlag = false;     //假设不存在数字
            var bigFlag = false;     //假设不存在大写字母
            var smallFlag = false;   //假设不存在小写字母
            var speFlag = false;     //假设不存在特殊字符
           
            var numReg = /[0-9]/;                 
            var bigReg = /[A-Z]/;     
            var smallReg = /[a-z]/;   
            var speReg = /[_$]/;

            if (numReg.test(pwd))   numFlag = true;     //验证存在数字
            if (bigReg.test(pwd))  bigFlag = true;     //验证存在大写字母
            if (smallReg.test(pwd))   smallFlag = true;   //验证存小写字母
            if (speReg.test(pwd))    speFlag = true;      //验证存在特殊字符  

            var sum = numFlag + bigFlag + smallFlag + speFlag; 
            switch(sum) {
                case 1: 
                    pwdSpan.innerHTML = "密码强度弱";
                    break;
                case 2: 
                    pwdSpan.innerHTML = "密码强度中";
                    break;
                case 3: 
                    pwdSpan.innerHTML = "密码强度强";
                    break;
                case 4: 
                    pwdSpan.innerHTML = "密码强度超强";
                    break;    
            }

            pwdSpan.className = "right";
            pwdFlag = true;
        } else {
            pwdSpan.textContent = result.msg;
            pwdSpan.className = "err";
        }
    }

//判断邮箱 
    emailInp.onblur = function() {
        emailFlag = false;
        var email = emailInp.value;
        var emailReg = /^\w{6,18}@\w+\.com$/;
        if (emailReg.test(email) ) {
            var xhr = new XMLHttpRequest();
            xhr.open("post","../php/isExistEmail.php",true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(`email=${email}`);
            xhr.onreadystatechange = function() {
                if(xhr.readyState  == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                    var result = JSON.parse(xhr.responseText);
                    console.log(result);
                    if(result.status) {
                        emailSpan.textContent = "√";
                        emailSpan.className = "right";
                        emailFlag = true;
                    } else {
                        emailSpan.textContent = result.msg;
                        emailSpan.className = "err";
                    }
                }
            }
        } else {
            emailSpan.textContent = "请输入正确的邮箱";
            emailSpan.className = "err";
        }
    }

//判断手机号
    phoneInp.onblur = function() {
        phoneFlag = false;
        var phone = phoneInp.value;
        var phoneReg = /^1[3456789][\d]{9}$/;
        if (phoneReg.test(phone) ) {
            var xhr = new XMLHttpRequest();
            xhr.open("post","../php/isExistPhone.php",true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(`phone=${phone}`);
            xhr.onreadystatechange = function() {
                if(xhr.readyState  == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                    var result = JSON.parse(xhr.responseText);
                    console.log(result);
                    if(result.status) {
                        phoneSpan.textContent = "√";
                        phoneSpan.className = "right";
                        phoneFlag = true
                    } else {
                        phoneSpan.textContent = result.msg;
                        phoneSpan.className = "err";
                    }
                }
            }
        } else {
            phoneSpan.textContent = "请输入正确的手机号";
            phoneSpan.className = "err";
        }
    }

// 生成验证码
    createCodeSpan.onclick = function () {      //点击切换验证码
        createCodeSpan.innerText = randCode();  
    }
//判断验证码
    
    codeInp.onblur = function() {   
        codeFlag = false  
        var code = codeInp.value;
        var _rand = createCodeSpan.innerText;       
        var codeReg = new RegExp(_rand,"i");
        
        if (codeReg.test(code) ) {
            codeSpan.textContent = "√";
            codeSpan.className = "right";
            codeFlag = true;
        } else {
            codeSpan.textContent = "x";
            codeSpan.className = "err";
        }
    }

    btn.onclick = function() {
    // 手机 邮箱 用户名验证是异步操作，会导致flag无法改变，day25有进行改进
        // userInp.onblur();
        // pwdInp.onblur();
        // emailInp.onblur();
        // phoneInp.onblur();
        // codeInp.onblur();

        if(userFlag && pwdFlag && emailFlag && phoneFlag && codeFlag) {

        // cookie模拟注册登录       注册存cookie  登录取cookie
            var user = userInp.value;           
            var pwd = pwdInp.value;           
            var phone = phoneInp.value;            
            var email = emailInp.value; 
            
            var xhr = new XMLHttpRequest();
            xhr.open("post","../php/register.php",true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(`user=${user}&pwd=${pwd}&email=${email}&phone=${phone}`);
            xhr.onreadystatechange = function() {
                if(xhr.readyState  == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                    var result = JSON.parse(xhr.responseText);
                    console.log(result);
                    if(result.status) {
                        location.href = "./login.html"
                    }
                }
            }
        } else {
            alert("请输入完整信息");
        }
    }
</script>

</html>